<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref,computed} from 'vue'

import userInfoStore from '@/stores/userInfo.js'
import {electTendererInfo,addTenderInfo,updateTenderInfo} from '@/api/tendererInfo.js'
import { ElMessage } from 'element-plus'


const userStore=userInfoStore();

// 所有表格数据
const tableData = ref([
  
]);

import {selectMyself} from '@/api/tendererInfo.js';

const allInfo=async()=>{
  let result=await selectMyself(userStore.info.name)
  tableData.value=result.data
}

allInfo();

// 分页状态
const currentPage = ref(1); // 当前页
const pageSize = ref(10);    // 每页显示的数据量

// 计算当前页展示的数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});

// 分页切换处理
const handlePageChange = (page) => {
  currentPage.value = page;
};

const handleReject=async (row)=>{
        // 处理打回操作
        await electTendererInfo(row.tenderProjectNo);
        ElMessage.success("删除成功")
        allInfo();
    }

// 招标数据模型
const tenderModel = ref({
    tenderProjectNo: '',
    drugName: '',
    manufacturer:userStore.info.name,
    packagingReq: '',
    totalNumber: '',
    tenderDeadline: '',
    bidDeposit: ''
});

// 控制抽屉显示与隐藏
const visibleDrawer = ref(false);
// 控制弹窗显示与隐藏
const visibleDialog = ref(false);

const formData=ref({
    tenderProjectNo:'',
    drugName: '',
    packagingReq: '',
    totalNumber: '',
    tenderDeadline: '',
    bidDeposit: ''
})

const submitTender=async()=>{
    let result=await addTenderInfo(tenderModel.value)
    if(result.code===200){
        ElMessage.success("发布成功")
        visibleDrawer.value=false;
    }else{
        ElMessage.error('发布失败')
    }
    allInfo();
}

const editor=(row)=>{
    visibleDialog.value=true
    formData.value.tenderProjectNo=row.tenderProjectNo
    formData.value.drugName=row.drugName
    formData.value.packagingReq=row.packagingReq
    formData.value.totalNumber=row.totalNumber
    formData.value.tenderDeadline=row.tenderDeadline
    formData.value.bidDeposit=row.bidDeposit
}
const submitForm=async ()=>{
        // 处理编辑操作
        let result=await updateTenderInfo(formData.value)
       if(result.code===200){
        ElMessage.success('编辑成功')
        visibleDialog.value=false
       }else{
        ElMessage.error('编辑失败')
       }
       allInfo();
    }
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>招标管理</span>
                <div class="extra">
                    <el-button type="primary" @click="visibleDrawer=true">发布招标</el-button>
                </div>
            </div>
        </template>
        <!-- 文章列表 -->
        <el-table :data="currentPageData" style="width: 100%">
            <el-table-column label="编号" prop="tenderProjectNo"></el-table-column>
            <el-table-column label="药品名称" prop="drugName"></el-table-column>
            <el-table-column label="包装要求" prop="packagingReq"></el-table-column>
            <el-table-column label="总量"  prop="totalNumber"></el-table-column>
            <el-table-column label="截止日期" prop="tenderDeadline"></el-table-column>
            <el-table-column label="保证金" prop="bidDeposit"></el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="editor(row)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="handleReject(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination 
                background 
                layout="prev, pager, next" 
                :total="tableData.length" 
                :current-page="currentPage" 
                :page-size="pageSize" 
                @current-change="handlePageChange" />
    </el-card>

<!-- 弹窗 -->
<el-dialog v-model="visibleDialog" title="招标信息编辑" width="30%">
  <!-- 表单容器 -->
  <el-form :model="formData" ref="formRef" label-width="120px">    
    <!-- 药品名称 -->
    <el-form-item label="药品名称" prop="drugName">
      <el-input v-model="formData.drugName" placeholder="请输入药品名称" />
    </el-form-item>
    
    <!-- 包装要求 -->
    <el-form-item label="包装要求" prop="packagingReq">
      <el-input v-model="formData.packagingReq" placeholder="请输入包装要求" />
    </el-form-item>
    
    <!-- 总量 -->
    <el-form-item label="总量" prop="totalNumber">
      <el-input v-model="formData.totalNumber" placeholder="请输入总量" />
    </el-form-item>
    
    <!-- 截止日期 -->
    <el-form-item label="截止日期" prop="tenderDeadline">
      <el-date-picker v-model="formData.tenderDeadline" type="date" placeholder="请选择截止日期" />
    </el-form-item>
    
    <!-- 保证金 -->
    <el-form-item label="保证金" prop="bidDeposit">
      <el-input v-model="formData.bidDeposit" placeholder="请输入保证金" />
    </el-form-item>
    
    <!-- 操作按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="visibleDialog=false">取消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" title="添加招标" direction="rtl" size="30%">
    <!-- 添加招标表单 -->
    <el-form :model="tenderModel" label-width="100px">
      <el-form-item label="招标项目编号">
        <el-input v-model="tenderModel.tenderProjectNo" placeholder="请输入招标项目编号"></el-input>
      </el-form-item>

      <el-form-item label="药品名称">
        <el-input v-model="tenderModel.drugName" placeholder="请输入药品名称"></el-input>
      </el-form-item>

      <el-form-item label="包装要求">
        <el-input v-model="tenderModel.packagingReq" placeholder="请输入包装要求"></el-input>
      </el-form-item>

      <el-form-item label="总量">
        <el-input v-model="tenderModel.totalNumber" placeholder="请输入招标总量" type="number"></el-input>
      </el-form-item>

      <el-form-item label="招标截止日期">
        <el-date-picker v-model="tenderModel.tenderDeadline" type="datetime" placeholder="选择招标截止日期" style="width: 100%;"></el-date-picker>
      </el-form-item>

      <el-form-item label="投标保证金">
        <el-input v-model="tenderModel.bidDeposit" placeholder="请输入投标保证金金额" type="number"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitTender">发布招标</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<style lang="scss" scoped>

/* 可根据需要调整样式 */
.el-drawer {
  padding: 20px;
}

.el-form {
  margin-top: 10px;
}
/* 自定义大小调整 */
.el-form-item {
  margin-bottom: 20px;
}

.el-input,
.el-button,
.el-date-picker {
  font-size: 16px; /* 修改字体大小 */
  height: 45px;    /* 修改输入框高度 */
}

.el-button {
  height: 45px;    /* 修改按钮高度 */
  font-size: 16px; /* 修改按钮字体大小 */
  line-height: 45px; /* 设置按钮文字居中 */
}
.page-container {
    min-height: 70vh; 
    max-height: 80vh; 
    width: 90%;
    box-sizing: border-box;
    padding: 20px; /* 给容器一些内边距 */
    overflow: auto; /* 当内容超出时允许滚动 */
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px; /* 你可以根据需要调整字体大小 */
}

.el-form-item {
    margin-bottom: 16px; /* 适当增加表单项之间的间距 */
}

.el-table {
    width: 100%;
    margin-top: 20px; /* 表格与其他内容之间的间距 */
}

.el-pagination {
    margin-top: 20px;
    justify-content: flex-end;
    padding-top: 20px;
    padding-bottom: 20px;
}

.el-button {
    font-size: 14px;
    margin-right: 8px;
}

.el-table-column {
    padding: 10px;
}
</style>